function setBackgroudColor(e = null) {
    if (!isNaN(e)) {
        for (let items = document.querySelectorAll(".item"), i = 0; i < items.length; i++) {
            items[i].style.backgroundColor = ""
        }
        return
    }
    for (let i = 0; i < e.length; i++) {
        if (e[i].hasAttribute("data-color")) {
            var color = e[i].getAttribute("data-color")
            e[i].style.backgroundColor = "#" + color
        }
    }
}

function selectElements(e) {
    switch (e) {
        case "radio2":
            setBackgroudColor()
            let items1 = document.getElementsByClassName("item")
            setBackgroudColor(items1)
            break;
        case "radio3":
            setBackgroudColor()
            let content = document.getElementsByClassName("content1")[0]
            let items2 = content.querySelector("#item3")
            items2.style.backgroundColor = "#" + items2.getAttribute("data-color")
            break;
        case "radio4":
            setBackgroudColor()
            let items3 = document.querySelectorAll("#item5,#item7,#item9")
            setBackgroudColor(items3)
            break;
        default:
            setBackgroudColor()
            break;
    }
}
for (let radios = document.querySelectorAll(".radio .selectradio"), index = 0; index < radios.length; index++) {
    const element = radios[index];
    element.addEventListener("change", function () {
        let ele = this.id
        selectElements(ele)
    })
}

function getAllListItem() {
    // 返回页面中所有li标签
    return document.querySelector("#wrapper").querySelectorAll("li")
}

function findAllHtmlSpanInOneSection(sectionId) {
    // 返回某个section下所有span中内容为HTML的span标签
    let spans = document.querySelector(sectionId).querySelectorAll("span")
    let newspans = []
    spans.forEach(element => {
        if (element.innerText == "HTML") newspans.push(element)
    })
    return newspans
}

function findListItem(sectionId, spanCont) {
    // 返回某个section下，所有所包含span内容为spanCont的LI标签
    let spans = document.querySelectorAll(sectionId + " span")
    let newspans = []
    spans.forEach(element => {
        if (element.innerText == spanCont) newspans.push(element.parentNode)
    })
    return newspans
}

function getActiveLinkContent(sectionId) {
    // 返回某个section下，class为active的链接中包含的文字内容
    let arr = document.querySelectorAll(sectionId + " a.active")
    let newArr = []
    for (let index = 0; index < arr.length; index++) {
        const element = arr[index];
        newArr.push({
            text: element.textContent,
            ele: element
        })
    }
    return newArr
}

document.querySelector("#libtn").onclick = function () {
    let lis = getAllListItem()
    lis.forEach(element => {
        element.style.backgroundColor = "yellowgreen"
    });
}
document.querySelector("#span1").onclick = document.querySelector("#span2").onclick = function (e) {
    let sectionId
    if (e.target.id == "span1") {
        sectionId = "#news-top"
    } else {
        sectionId = "#news-normal"
    }
    let spans = findAllHtmlSpanInOneSection(sectionId)
    spans.forEach(element => {
        element.style.color = "orange"
    });
}
document.querySelector("#li1").onclick = document.querySelector("#li2").onclick = function (e) {
    let sectionId
    if (e.target.id == "li1") {
        sectionId = "#news-top"
    } else {
        sectionId = "#news-normal"
    }
    let lis = findListItem(sectionId, "JS")
    lis.forEach(element => {
        element.style.backgroundColor = "orange"
    });
}
document.querySelector("#active1").onclick = document.querySelector("#active2").onclick = function (e) {
    let sectionId
    if (e.target.id == "active1") {
        sectionId = "#news-top"
    } else {
        sectionId = "#news-normal"
    }
    let arr = getActiveLinkContent(sectionId)
    arr.forEach(element => {
        element.ele.style.backgroundColor = "orange"
        document.querySelector(sectionId + " p").innerHTML = "class为active的链接中包含的文字内容: " + element.text
    });
}